<template>
    <div>
        <div class="banner"></div>
        <hr>
        <div class="content">
            <div class="top">
                <div class="back">     </div>
                <div class="num">购物车 （ <span>{{this.$store.getters.cartNum}}</span> ）</div>
                <div class="sumup">
                    <!-- 已选商品： &nbsp;<span>1</span>  件 &nbsp; &nbsp;&nbsp;<span>￥10000</span>  &nbsp;   -->
                    <div class="SumUp" @click="clearCart()">
                        清空购物车
                    </div>
                </div>
            </div>
            <div class="middle">
                <div class="infos">
                    <div class="info1 info">
                        <input type="checkbox" style="float:left" id="all" v-bind:checked="isChecked" @click="checkAll()">
                        <div>全选</div>
                    </div>
                    <div class="info2 info">
                        商品信息
                    </div>
                    <div class="info3 info">
                        单价
                    </div>
                    <div class="info4 info">
                        数量
                    </div>
                    <div class="info5 info">
                        总价
                    </div>
                    <div class="info6 info">
                        操作
                    </div>
                </div>
                <div v-if="empty" >
                    <div class="item" v-for="(item,index) of cartList" :key="index">
                        <input type="checkbox" @click="checkOne(item)" v-bind:checked="item.isChecked1">
                        <img :src="item.pic1" class="cartImg">
                        <div class="title">[宅寂]{{item.name}}<br>原木色</div>
                        <div class="price">￥{{item.price}}</div>
                        <div class="Num">
                            <div class="dec" @click="decNum(item)">-</div>
                            <div class="num">{{item.count}}</div>
                            <div class="inc" @click="incNum(item)">+</div>
                        </div>
                        <div class="allPrice">￥{{item.price*item.count}}</div>
                        <div class="del" @click="delChange(item,index)"></div>&nbsp;
                        <div class="like" v-bind:class="likedArr.indexOf(index)>=0?'liked':''"  @click="likeChange(item,index)"></div>
                    </div>
                </div>
                <div v-else class="empty">
                    购物车空空如也~
                </div>
                <div class="Price">
                    <div class="AllPrice">订单总价</div>
                    <div class="PriceInfo">
                        <div class="InfoName">
                            商品价格：<br>
                            优惠价格：<br>
                            运费：
                        </div>
                        <div class="thprice">
                            <div class="price1 price">￥{{totelPrice}}</div>
                            <div class="price2 price">￥0</div>
                            <div class="price3 price">￥0</div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="bot">
                <div class="bot1">已经选购了<span>{{cartClass}}</span>件商品</div>
                <div v-if="cartArr.length>0">
                    <div><button   @click="showModal" style="-webkit-user-select:none;
                    -moz-user-select:none;
                    -ms-user-select:none;
                    user-select:none;">立即结算</button></div>
                </div>
                <div v-else>
                    <div><button  style="-webkit-user-select:none;
                    -moz-user-select:none;
                    -ms-user-select:none;
                    user-select:none;
                    cursor: not-allowed;"
                    >立即结算</button></div>
                </div>

                <div class="bot2">总价：<span>￥{{totelPrice}}</span></div>
                <b-modal ref="modal1"  hide-footer title="选择地址">
                    <div>
                        <b-table striped hover :items="addList" :fields="fields">
                            <template slot="index" slot-scope="data">
                                <b-form-radio-group id="radios1" v-model="selected" name="radioSubComponent">
                                    <b-form-radio @click.native.stop @change="checkAdd(data.index)" :value="data.index"></b-form-radio>
                                </b-form-radio-group>
                                <!-- {{data.index + 1}} -->

                            </template>
                        </b-table>
                    </div>

                    <b-btn class="mt-3" variant="outline-danger" block @click="hideModal">结算</b-btn>
                </b-modal>
                <b-modal ref="modal2" hide-footer title="添加地址">
                    <div class="noneAdd">
                        还没有地址，快去<router-link to="/personal">个人中心</router-link>添加吧~
                    </div>
                </b-modal>
            </div>
            <div class="recom">
                你可能还喜欢
            </div>
            <div v-if="recomList.length>0">
                <div class="recomPic">
                    <ul>
                        <li v-for="(item,index) of recomList" :key="index">
                            <img :src="item.pic1">
                            <p class="recomTitle">
                                {{item.name}}
                            </p>
                            <p class="recomPrice">
                                ￥{{item.price}}
                            </p>
                            <p class="cilckBtn"  >
                                 <router-link :to="{path:'/details',query:{id:item.cid}}">
                                    <span>点击查看</span>
                                 </router-link>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 结算成功alert -->
        <b-alert :show="dismissCountDown"
                    dismissible
                    fade
                    variant="warning"
                    @dismissed="dismissCountDown=0"
                    @dismiss-count-down="countDownChanged" class="alert">
            &nbsp;&nbsp;&nbsp;结算成功！dismiss {{dismissCountDown}} seconds...
        </b-alert>
    </div>
</template>
<script>
import Vue from 'vue'
export default {
    data(){
        return {
            // status: 'not_allselected',
            likedArr:[],
            cartArr:[],//要结算的商品
            checkArr:[],//已经勾选的商品cid
            recomList:[],
            recomList2:[],
            cartList:[],//购物车内所有的商品列表
            cartClass:0,//购物车内商品种类
            totelPrice:0,//商品总价
            fields: [
                'index',
                'name',
                'province',
                'phone',
                'city',
                'detail'
            ],
            addList:[],//地址列表
            isChecked:true,
            selected:0,
            empty:true,//用户的购物车是否为空
            dismissSecs: 10,
            dismissCountDown: 0,
            totalNum:0,
        }
    },
    methods: {
        //删除购物车内的单件商品
        delChange(item,index){
            var cartnum=0,totelprice=0,cartclass=0;
            this.axios({
                url:`${this.$config.dataUrl}/v1/cart/deleteCartcent?uid=${this.$store.getters.uid}&cid=${item.cid}`,
                method:"get"
            }).then(res=>{
                //console.log(res)
            })
            this.cartList.splice(index,1);
            for(var i=0;i<this.cartArr.length;i++){
                if(this.cartArr[i].id==item.id){
                    this.cartArr.splice(this.cartArr.indexOf(this.cartArr[i]),1);
                }
            }
            for(var item of this.cartArr){
                cartnum+=item.count;
                totelprice+=item.count*item.price;
                cartclass+=1;
            }
            this.$store.dispatch('setcartNum',cartnum);
            this.totelPrice=totelprice;
            this.cartClass=cartclass;
            this.cartArr=this.cartList;
            if(this.cartList.length<=0){
                this.empty=false;
            }
        },
        //收藏
        likeChange(item,i){
            if(!item.active){
                item.active=true;
                this.likedArr.push(i);
                //console.log(item.active)
            }else{
                item.active=false;
                this.likedArr.splice(this.likedArr.indexOf(i),1);
                //console.log(item.active);
            }
           //console.log(this.likedArr)
        },
        //减少数量
        decNum(item){
            if(item.count>1){
                item.count--;

                if(this.cartArr.indexOf(item)>=0){
                    this.$store.dispatch('decrease', 1);
                    this.totelPrice-=item.price;
                }
                this.axios({
                    url:`${this.$config.dataUrl}/v1/cart/reduceCartCount?uid=${this.$store.getters.uid}&cid=${item.cid}`,
                    method:"get"
                }).then(res=>{
                    // console.log(res);
                })
            }
        },
        //增加数量
        incNum(item){
            if(item.count<99){
                item.count++;
                 //  this.$store.dispatch('setcartNum', 0);//解决持久化时，cartNum的错误
                if(this.cartArr.indexOf(item)>=0){
                    this.$store.dispatch('increase', 1);
                    this.totelPrice+=item.price;
                }
                this.axios({
                    url:`${this.$config.dataUrl}/v1/cart/addCartCount?uid=${this.$store.getters.uid}&cid=${item.cid}`,
                    method:"get"
                }).then(res=>{
                    //console.log(res);
                })
            }
        },
        //勾选要结算的商品
        checkOne(item){
            item.isChecked1=!item.isChecked1
            // console.log('cartArr:',this.cartArr)
            // console.log('cartList:',this.cartList)
            //如果该商品已经勾选
            if(item.isChecked1===false){
                // console.log('已存在')
                // console.log('cartList:',this.cartList)
                this.cartArr.splice(this.cartArr.indexOf(item),1);
                // console.log('cartList:',this.cartList)
                // console.log(this.cartArr==this.cartList)
                this.checkArr.splice(this.checkArr.indexOf(item.cid),1);//取消勾选时，在checkArr删除
                this.$store.dispatch('decrease',item.count);
                this.totelPrice-=item.count*item.price;
                this.cartClass-=1;
            }else{
                //console.log('未存在')
                this.cartArr.push(item);
                this.checkArr.push(item.cid);
                this.$store.dispatch('increase',item.count);
                this.totelPrice+=item.count*item.price;
                this.cartClass+=1;
            }
            // if(this.checkArr.length !== this.cartList.length){
            //     this.isChecked=false;
            // }else{
            //     this.isChecked=true;
            // }

            /* console.log('cartArr:',this.cartArr)
            console.log('cartList:',this.cartList) */
        },
        //显示模态框&请求地址
        showModal(){

            this.axios({
                url:`${this.$config.dataUrl}/users/address/${this.$store.getters.uid}`,
                method:"get"
            }).then(res=>{
                if(res.status == '200' ){
                    if(res.data.status == '200'){
                        for(var i=0;i<res.data.data.length;i++){
                            this.addList.push(res.data.data[i])
                        }
                        this.$refs.modal1.show();
                    }else if(res.data.status == '500'){
                        this.$refs.modal2.show();
                    }
                }
            })
        },
        //隐藏模态框==结算
        hideModal(){
                var cartId=[];//所有商品的id
                var cartnum=0;
                this.$refs.modal1.hide();
                for(var good of this.cartArr){
                    cartId.push(good.id);
                }
                var addId=this.addList[this.selected].id;//地址的id
                //结算勾选的商品
                this.axios({
                    url:`${this.$config.dataUrl}/v1/cart/paySomeCart?cartids=${cartId.join()}&aid=${addId}`,
                    method:"get"
                }).then(res=>{
                    if(res.status == '200' ){
                        //结算成功
                    }
                })

                for(var item of this.cartArr){//删除购物车内已结算的商品
                    this.cartList.splice(this.cartList.indexOf(item),1);
                    this.cartClass--;
                }
                for(var item of this.cartList){
                    item.isChecked1=false;
                    cartnum+=item.count;
                }
                this.cartArr=[];
                this.checkArr=[];
                this.totelPrice=0;
                this.$store.dispatch('setcartNum',0);
                if(this.cartList.length==0){
                    this.empty=false;

                }

                this.dismissCountDown = this.dismissSecs;
        },
        checkAdd(i){
            this.selected=i;
        },
        //全选按钮
        checkAll(){
            this.isChecked=!this.isChecked
            var cartnum=0,totelprice=0,cartclass=0;
            if(this.isChecked === true){//全选
                for(var item of this.cartList){
                    item.isChecked1=true;
                }
                for(var item of this.cartList){
                    totelprice+=item.count*item.price;
                    cartclass+=1;
                    this.checkArr.push(item.cid);
                }
                console.log(this.cartList)
                this.$store.dispatch('setcartNum',cartnum);
                this.totelPrice=totelprice;
                this.cartClass=cartclass;
                this.cartArr=[];
                this.checkArr=[];
                for(var i of this.cartList){
                    this.cartArr.push(i);
                }
                for(var i of this.cartList){
                    this.checkArr.push(i.cid);
                }
            }else{//取消全选
                for(var item of this.cartList){
                    item.isChecked1=false;
                }
                console.log(this.cartList)
                this.totalNum=0;
                this.$store.dispatch('setcartNum',this.totalNum);
                this.totelPrice=0;
                this.cartClass=0;
                this.cartArr=[];
                this.checkArr=[];
            }
        },
        //清空购物车
        clearCart(){
            this.axios({
                url:`${this.$config.dataUrl}/v1/cart/payAllCart?uid=${this.$store.getters.uid}`,
                method:"get"
            }).then(res=>{
                if(res.status == '200' ){
                    //console.log(res.data);
                }
            })
            this.cartArr=[];
            this.cartList=[];
            this.cartClass=[];
            this.$store.dispatch('setcartNum',0);
            this.checkArr=[];
            this.totelPrice=0;
            this.empty=false;
        },
        countDownChanged (dismissCountDown) {
            this.dismissCountDown = dismissCountDown
        },

  },
    beforeMount(){
        //this.$store.dispatch('setUid',2)
        // console.log('uid',this.$store.getters.uid)
        //渲染该用户的购物车信息
        this.axios({
            //url:`http://${this.$store.state.adminPath}/v1/cart/selectCart?uid=${this.$store.getters.uid}`,
            url:`${this.$config.dataUrl}/v1/cart/selectCart?uid=${this.$store.getters.uid}`,
            method:"get"
        }).then(res=>{
            this.$store.dispatch('setcartNum', 0);
            if(res.status == '200' ){
                for(var i of res.data){
                    i.active=false;
                    i.isChecked1=true
                    this.cartClass++;
                    this.totelPrice+=(i.price*i.count);
                    this.cartArr.push(i);
                    this.$store.dispatch('increase', i.count);
                    this.checkArr.push(i.cid);//把checkd商品的id加入checkArr
                    this.cartList.push(i);
                }
                //this.cartList=res.data;
                /* console.log(this.cartArr == this.cartList) */
                this.cartList.length>0?this.empty=true:this.empty=false;
            }
        })
        //渲染猜你喜欢部分
        var that=this;
        Vue.nextTick(function(){
            that.axios({
            //url:`http://${this.$store.state.adminPath}/v1/cart/selectLike`,
                url:`${that.$config.dataUrl}/v1/cart/selectLike`,
                method:"get"
            }).then(res=>{
                if(res.status == '200'){
                    //this.recomList=res.data;
                    for(var i=0;i<res.data.length;i++){
                        that.recomList.push(res.data[i]);
                    }
                    that.recomList.length=4;
                    /* console.log(222222222222222)*/
                }
            })
        })
    },
    computed: {
        cartChange(){
            return this.cartArr.length
        }
    },
    watch: {
        cartChange:{
            handler(nv,ov){
                if(nv==this.cartList.length){
                    this.isChecked=true;
                }else{
                    this.isChecked=false;
                }
                this.totalNum=0;
                for(var i of this.cartArr){
                    this.totalNum+=i.count
                }
                this.$store.dispatch('setcartNum',this.totalNum)
            }
        }
    },
}

</script>

<style scoped lang="scss" deep>
    .banner{
        height: 0.3rem;

    }
    hr{
        margin-bottom: 0;
    }
    .content{
        width: 65%;
/*         height: 20rem; */
        margin: 0 auto;
        /* background-color: lightblue */

    }
    .top{
        font-size: 0.14rem;
        overflow: hidden;
    }
    .back{
        font-size: 0.16rem;
        height: 0.16rem
    }
    .num{
        font-size: 0.24rem;
        float: left;
    }
    .sumup{
        float: right;
    }
    .SumUp{
        width:1.3rem;
        height:0.3rem;
        background:rgba(180,157,126,1);
        border-radius:0.02rem;
        font-size:0.14rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(255,255,255,1);
        text-align: center;
        line-height: 0.3rem;
        float: right;
        cursor: pointer;
        -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
    }

    .infos{
        margin-top: 0.25rem;
        height:0.51rem;
        background:rgba(180,157,126,1);
        font-size:0.14rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(255,255,255,1);
        text-align: center;
        line-height: 0.51rem;
    }
    .info{
        overflow: hidden;
        float: left;
    }
    .info1{
        margin-right: 1.81rem;
    }
    .info2{
        margin-right: 2.7rem;
    }
    .info3{
        margin-right: 1.5rem;
    }
    .info4{
        margin-right: 1.48rem;
    }
    .info5{
        margin-right: 1.47rem;
    }
    #all{
        border:1px solid rgba(238,238,238,1);
        border-radius:0.02rem;
        color: #fff;
        margin:0.16rem 0.11rem 0.16rem 0.24rem;
    }
    .info1 div{
        float: left;
    }

    .item{
        width:100%;
        height:1.41rem;
        border-bottom:1px solid rgba(232,232,232,1);
        overflow: hidden;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(67,67,67,1);
    }
    .item input{
        float: left;
        margin: 0.67rem 0.31rem 0.65rem 0.57rem;
    }
    .item .cartImg{
        width:1.20rem;
        height:0.81rem;
        float: left;
        margin: 0.31rem 0.3rem 0 0
    }
    .item .title{
        width: 3rem;
        font-size:0.14rem;
        float: left;
        margin: 0.55rem 0.4rem 0 0;
    }
    .item .price{
        width: 1.6rem;
        font-size:0.14rem;
        float: left;
        margin: 0.65rem 0 0 0;
    }

    .item .Num{
        float: left;
        font-size:0.18rem;
        font-family:ArialMT;
        margin-top: 0.65rem;
        vertical-align: middle;
    }
    .item .Num div{
        width: 0.5rem;
        float: left;
        text-align: center;
    }
    .item .Num .dec{
        width:0.3rem;
        height:0.3rem;
        border:0.01rem solid rgba(67,67,67,1);
        cursor: pointer;
    }
    .item .Num .inc{
        width:0.3rem;
        height:0.3rem;
        border:0.01rem solid rgba(67,67,67,1);
        cursor: pointer;
    }
    .Num{
        -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
    }
    .item .num{
        line-height: 0.3rem;
    }
    .item .allPrice{
        width: 1.8rem;
        float: left;
        font-size:0.14rem;
        margin: 0.65rem 0 0  0.9rem;
    }
    .item .del{
        width: 0.3rem;
        height: 0.3rem;
        background-image:url('../../assets/img/icons/sprite2.png');//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!图片路径问题
        background-position: 0rem -0.78rem;
        float: left;
        margin: 0.61rem 0.1rem 0 0;
        cursor: pointer;
        background-size: 430%;
    }
    .item .like{
        width: 0.3rem;
        height: 0.3rem;
        background-image:url('../../assets/img/icons/sprite2.png');//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!图片路径问题
        background-position: 0rem -1.23rem;
        float: left;
        margin: 0.61rem 0 0 0;
        cursor: pointer;
        background-size: 430%;
    }
    .item .liked{
        background-position: -0.46rem -1.23rem;
    }
    .Price{
        height: 1.34rem;
        overflow: hidden;
        font-size: 0.14rem;
    }
    .AllPrice{
        font-size:0.18rem;
        margin:0.32rem 8.07rem 0 0.23rem;
        float: left;
    }
    .InfoName{
        float: left;
        margin: 0.3rem 0.74rem 0 0;
    }
    .thprice{
        float: left;
        margin: 0.3rem 0 0 0;
    }

    .bot{
        height:0.5rem;
        background:rgba(242,242,242,1);
        font-size: 0.16rem;
        line-height: 0.5rem;
    }

    .bot .bot1{
        float: left;
        margin-left: 0.23rem;
    }
    .bot .bot2{
        float: right;
        margin-right: 0.1rem;
    }
    .bot button{
        float: right;
        width:1.6rem;
        height:0.5rem;
        background:rgba(180,157,126,1);
        font-size:0.16rem;
        color:rgba(255,255,255,1);
        border: 0;
        cursor: pointer;
    }
    .recom{
        font-size:0.28rem;
        color:rgba(180,157,126,1);
        margin: 0.71rem 5.16rem 0.4rem;
    }
    .recomPic ul{
        padding-inline-start: 0;
        overflow: hidden;
    }
    .recomPic li{
        list-style : none;
        width      : 2.8rem;
        height     : 4.38rem;
        margin-left: 0.265rem;
        margin-bottom: 0.5rem;
        position   : relative;
        transition : all 0.4s;
        float: left;
        -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
    }
    .recomPic li:hover{
        box-shadow: 0px 12px 25px 3px rgba(95,92,92,0.34);
    }
    .recomPic li:hover .cilckBtn{
        font-size      : 0.18rem;
        position       : absolute;
        display        : flex;
        justify-content: center;
        width          : 100%;
        margin-bottom  : 0;
        left: 0.77rem;
        bottom         : 0;
        cursor         : pointer;
        width           : 1.33rem;
        height          : 0.42rem;
        line-height     : 0.42rem;
        text-align      : center;
        border:0.01rem solid rgba(67,67,67,1);
        display: block;
    }
    .recomPic li img{
        width: 2.8rem;
        height: 2.8rem;
    }
    .recomTitle{
        font-size      : 0.24rem;
        position       : absolute;
        display        : flex;
        justify-content: center;
        width          : 100%;
        margin-bottom  : 0;
        bottom         : 1.14rem;
    }
    .recomPrice{
        width:0.95rem;
        height:0.25rem;
        background:rgba(180,157,126,1);
        font-size:0.18rem;
        font-family:HYQiHei-DES;
        font-weight:normal;
        color:rgba(255,255,255,1);
        position: absolute;
        left: 0.93rem;
        bottom: -0.2rem;
        text-align: center;
        line-height: 0.25rem;
    }
    .cilckBtn{
        font-size      : 0.18rem;
        position       : absolute;
        display        : flex;
        justify-content: center;
        width          : 100%;
        margin-bottom  : 0;
        left: 0.77rem;
        bottom         : 0;
        cursor         : pointer;
        width           : 1.33rem;
        height          : 0.42rem;
        line-height     : 0.42rem;
        text-align      : center;
        border:0.01rem solid rgba(67,67,67,1);
        display: none;
    }
    .cilckBtn span{
        color: #000;
    }
    #modal1{
        font-size: 0.2rem;
    }
    #modal1 li{
        list-style: none;
        font-size: 0.2rem;
    }
    .empty{

        height: 2rem;
        font-size: 0.2rem;
        line-height: 2rem;
        text-align: center;
        border-bottom: 0.01rem solid #b49d7e;
    }
    .noneAdd{
        height: 0.4rem;
        font-size: 0.2rem;
        text-align: center;
    }
</style>
<style>
.modal-title{
    font-size: 0.3rem
}
.modal-header{
    padding: 0.1rem;
    padding-left: 0.2rem;
}
.modal-header .close{
    padding: 0;
    margin: 0;
}
.close{
    font-size: 0.5rem
}
.modal-body{
    padding: 0.4rem;
}
.btn{
    font-size: 0.18rem;
    padding: 0.1rem 0.2rem;
}
.modal-footer{
    padding: 0.2rem;
}
.modal-dialog{
    max-width: 12rem;
}
.table{
    margin-bottom: 0;
}
.mt-3, .my-3{
    margin-top: 0.5rem !important;
}
.table th, .table td{
    padding: 0.1rem;
}
.custom-control-inline{
    margin-right: 0;
}
.custom-control{
    padding-left: 0.5rem;
}
.custom-control-label::before{
    width: 0.2rem;
    height: 0.2rem;
    left: -0.2rem;
}
.custom-control-label::after{
     width: 0.2rem;
    height: 0.2rem;
    left: -0.2rem;
}
.custom-control{
    min-height: 0.45rem;
}
.alert{

}
.alert-dismissible{
    padding: 0
}
.alert{
    padding: 0.1rem 0.1rem ;
    font-size: 0.2rem;
    width:5rem;
    position: absolute;
    top: 3rem;
    left: 40%;
}
.alert-dismissible .close{
    padding: 0.05rem 0.05rem ;
    right: 0.07rem;
    top: -0.02rem;
}
.close{
    font-size: 0.4rem
}
</style>
